<template>
  <codemirror
    v-model="code"
    placeholder="Code gose here..."
    :style="{ height: '720px', width: 'px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tabSize="2"
    :extensions="extensions"
  />
</template>

<script lang="ts" setup>
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";

import { computed } from "vue";
import { compileCode, source } from "../bus/source";
var code = computed(() => {
  if (source.isCompiled) {
    return compileCode(source.code);
  }
  return source.code;
});

const extensions = [javascript(), oneDark];
</script>
